<template>
  <view v-if="!isLoading" class="container">
    <view class="goods-list" v-if="lists.length>0">
      <view class="item" v-for="(item,index) in lists" :key="index">
        <xy-goods-row4 :item="item"/>
      </view>
    </view>
    <view v-else>
      <xy-empty :text="'暂无商品'"/>
    </view>

  </view>
</template>

<script>
import {mapState, mapActions} from 'vuex';
import xyGoodsRow4 from "@/components/xy-goods/row4.vue";
import xyEmpty from "@/components/xy-empty/index.vue";

export default {
  components: {
    xyEmpty, xyGoodsRow4,
  },
  data() {
    return {
      isLoading: true,
      lists: [],
      currentPage: 1,
      lastPage: 1,
    }
  },
  computed: {
    ...mapState(['common', 'user'])
  },
  async onLoad(options) {
    var that = this;
    that.loadData();
  },
  onPullDownRefresh() {
    this.onPullDownRefresh();
  },
  methods: {

    // 数据加载
    loadData: function () {
      var that = this;
      this.$api.post({
        url: '/goods/browseHistory',
        loadingTip: '加载中...',
        data: {
          page: that.currentPage,
        },
        success: res => {
          this.lists = [...this.lists, ...res.data];
          this.isLoading = false;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          uni.stopPullDownRefresh();
        }
      });
    },

    onPullDownRefresh() {
      this.currentPage = 1;
      this.lists = [];
      this.loadData();
    },
    onReachBottom() {
      if(this.currentPage < this.lastPage) {
        this.currentPage += 1;
        this.loadData();
      }
    },

  }
}
</script>

<style>
page {
  background: #e5e5e5;
  overflow: hidden;
}
</style>
<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  padding: 0 20rpx;
}

.goods-list {
  .item {
    background: #fff;
    margin: 10rpx 0;
  }
}


</style>
